@using OrchardCore
@using OrchardCore.Commerce.Abstractions.Models
@using OrchardCore.Commerce.Payment.Controllers
@using OrchardCore.Mvc.Utilities
@using static OrchardCore.Commerce.Constants.ResourceNames
@using static OrchardCore.Commerce.Payment.Constants.ResourceNames

@model OrchardCore.Commerce.Payment.ViewModels.CheckoutViewModel

@{
    var orderPart = Model.OrderPart;

    var regions = Model.Regions.AsList();
    var provinces = Model.Provinces;

    var actionUrl = Orchard.Action<PaymentController>(controller =>
        controller.CheckoutWithoutPayment(Model.ShoppingCartId));
}

<section id="checkout">
    <div class="payment-form_container">
        <form action="@actionUrl" method="post" id="payment-form" class="payment-form">
            @Html.AntiForgeryToken()

            <shape type="InputRow"
                   prop-Name="@Html.NameFor(model => model.OrderPart.Email.Text)"
                   prop-Text="@T["E-mail"]"
                   prop-Value="@Model.OrderPart.Email.Text"
                   prop-ClassNames="@("payment-form-email")"
                   prop-Required="@true" />

            <shape type="InputRow"
                   prop-Name="@Html.NameFor(model => model.OrderPart.Phone.Text)"
                   prop-Text="@T["Phone Number"]"
                   prop-Value="@Model.OrderPart.Phone.Text"
                   prop-ClassNames="@("payment-form-phone")"
                   prop-Required="@true" />

            <shape type="InputRow"
                   prop-Name="@Html.NameFor(model => model.OrderPart.VatNumber.Text)"
                   prop-Text="@T["VAT Number"]"
                   prop-Value="@Model.OrderPart.VatNumber.Text"
                   prop-ClassNames="@("payment-form-vat")" />

            <div class="mb-3">
                <div class="form-check">
                    <input type="checkbox"
                           asp-for="OrderPart.IsCorporation.Value"
                           class="form-check-input content-preview-select">
                    <label asp-for="OrderPart.IsCorporation.Value" class="form-check-label">
                        @T["Buyer is a corporation"]
                    </label>
                </div>
            </div>

            <div class="address address_billing-address">
                <h3 class="address__title">@T["Billing Address"]</h3>

                @await DisplayAsync(
                           new AddressFieldEditorViewModel
                           {
                               AddressField = orderPart.BillingAddress,
                               CityName = Html.NameFor(model => model.OrderPart.BillingAddress.Address.City),
                               Regions = regions,
                               Provinces = provinces,
                               Metadata = { Differentiator = $"{AddressFieldEditorViewModel.ShapeType}-{nameof(OrderPart.BillingAddress)}" },
                           })
            </div>

            <div class="address address_shipping-address">
                <h3 class="address__title">@T["Shipping Address"]</h3>

                @await DisplayAsync(
                           new AddressFieldEditorViewModel
                           {
                               AddressField = orderPart.ShippingAddress,
                               CityName = Html.NameFor(model => model.OrderPart.ShippingAddress.Address.City),
                               Regions = regions,
                               Provinces = provinces,
                               Metadata = { Differentiator = $"{AddressFieldEditorViewModel.ShapeType}-{nameof(OrderPart.ShippingAddress)}" },
                           })
            </div>

            <div class="mb-3">
                <div class="form-check">
                    <input type="checkbox"
                           asp-for="OrderPart.BillingAndShippingAddressesMatch.Value"
                           class="form-check-input content-preview-select"
                           data-val="true"
                           value="true">
                    <label asp-for="OrderPart.BillingAndShippingAddressesMatch.Value" class="form-check-label">
                        @T["Shipping Address and Billing Address are the same"]
                    </label>
                </div>
            </div>

            @foreach (var shape in Model.CheckoutShapes)
            {
                try
                {
                    @await DisplayAsync(shape)
                }
                catch (Exception exception) when (exception.Message.Contains($"The shape type '{shape.Metadata.Type}' is not found"))
                {
                    // It's fine, we only want to display the shape if a template exists.
                }
            }

            @* If totals are zero, there's no need for payment. *@
            @if (Model.SingleCurrencyTotal.Value > 0)
            {
                <div class="payment-provider-list">
                    @foreach (var (providerName, data) in Model.PaymentProviderData)
                    {
                        var shapeName = "Checkout" + providerName;
                        <div class="payment-provider payment-provider-@shapeName.HtmlClassify()">
                            <shape type="@shapeName"
                                   prop-DefaultTotal="@Model.SingleCurrencyTotal"
                                   prop-NetTotal="@Model.NetTotal"
                                   prop-GrossTotal="@Model.GrossTotal"
                                   prop-PaymentProviderData="@data" />
                        </div>
                    }
                </div>
            }
            else
            {
                <div class="pay-button-container">
                    <button class="pay-button btn btn-success justify-content-center" type="submit">
                        <span class="pay-text">
                            @T["Checkout Without Payment"]
                        </span>
                    </button>
                </div>
            }
        </form>
    </div>
</section>

<style asp-name="@PaymentForm"></style>

<script asp-name="@ToggleSecondAddress" at="Foot"></script>
<script depends-on="@ToggleSecondAddress" at="Foot">
    const checkbox = document.getElementById('OrderPart_BillingAndShippingAddressesMatch_Value');
    checkbox.checked = @Json.Serialize(Model.OrderPart.BillingAndShippingAddressesMatch.Value);
    initializeToggleSecondAddress(
        checkbox,
        document.querySelector('.address_billing-address'),
        document.querySelector('.address_shipping-address'));
</script>
